import Search from "@/components/public/Search";

import { View, Image } from "@tarojs/components";
import icon_denj_one from "@/assets/image/icon_denj_one.jpg";
import "./index.scss";
import { useDidShow, useReachBottom } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { getPlatform } from "@/services/entities/all";
import { preview } from "@/helper/utils";
const PlatformPage = () => {
  const [page, setPage] = useState(1);
  const [name, setName] = useState("");
  const [list, setList] = useState<any>([]);
  const getList = (pageNum) => {
    getPlatform({ currentPage: pageNum, pageSize: 10, name: name }).then(
      (res: any) => {
        console.log("res22.", res);
        if (pageNum === 1) {
          setList(res.records);
        } else {
          setList((old) => {
            return [...old, ...res.records];
          });
        }
      }
    );
  };

  useReachBottom(() => {
    if (page * 10 === list.length) {
      setPage((old) => old + 1);
    }
  });

  useEffect(() => {
    getList(page);
  }, [page]);

  useDidShow(() => {
    setPage(1);
    getList(1);
  });

  return (
    <View className="platform-container bg-page pb-24 border-box">
      <View className="dis-flex bg-ffffff pd-16 border-box">
        <Search
          className="bg-ffffff width-full"
          onInput={(value) => {
            setName(value);
          }}
          right={
            <View
              className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
              onClick={() => {
                setPage(1);
                getList(1);
              }}
            >
              查询
            </View>
          }
        />
      </View>
      <View className="flex-column align-center">
        {list?.map((item, index) => {
          return (
            <View
              key={index}
              className="card-bg mt-38 br-16 flex-column pd-tb-60 border-box"
            >
              <View className="tips-bg fs-24 lh-32 cl-white dis-flex justify-center pt-10 border-box text-overflow">
                {item.name}
              </View>
              <View className="flex-center mt-60">
                <View className="qr-code br-38 bg-ffffff flex-center">
                  <Image
                    src={item.imageUrl}
                    onClick={() => {
                      preview(item.imageUrl, [item.imageUrl]);
                    }}
                    className="qr-code-img br-38 bg-ffffff"
                  />
                </View>
              </View>
              {/* <View className="flex-center mt-24 fs-28 lh-36 cl-9BB4E4">
                二维码
              </View> */}
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default PlatformPage;
